<template>
  <div class="container">
    <p class="title">顺序编排学校</p>
    <step index="2"></step>

    <!-- 编排表格 -->
    <div class="table-wrapper">
      <el-table :data="manuallyData" :span-method="objectSpanMethod" border class="c-table" style="width: 100%" v-loading="loading">
        <el-table-column prop="date" label="考试时间" width="200"></el-table-column>
        <el-table-column prop="schoolName" label="学校"></el-table-column>
        <el-table-column prop="room" label="考场编号"></el-table-column>
        <el-table-column prop="admissionRange" label="考试批次">
          <template slot-scope="scope">
            第{{ scope.row.batchBegin }}批 - 第{{ scope.row.batchEnd }}批
          </template>
        </el-table-column>
        <el-table-column prop="studentNum" label="人数">
          <template slot-scope="scope">
            {{ scope.row.studentNum }}人
          </template>
        </el-table-column>
        <el-table-column prop="studentNum" label="合计人数">
          <template slot-scope="scope">
            {{ scope.row.studentNum }}人
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btn">
      <a href="javascript:;" class="save" @click="saveManuallyComplete()">保存编排结果</a>
      <a href="javascript:;" class="cancel" @click="$router.push({ name: 'sequenceSchoolStep1' })">新建编排</a>
    </div>

    <!-- 用户考点在准考证上的序号ID -->
    <!-- <el-dialog :visible.sync="createVisible"
      title="输入编排序号"
      custom-class="c-dialog"
      @close="resetForm"
      width="30%">
      <div class="dialog-cont">
        <el-form ref="ruleForm" :model="form" :rules="rules" class="c-form student-form" label-width="60px">
          <el-form-item label="序号" prop="pointOrder">
            <el-input v-model="form.pointOrder"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="c-btn" type="primary" @click="saveManuallyComplete()">确 定</el-button>
        <el-button class="c-btn" @click="resetForm">取 消</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import step from '@/components/step.vue'
export default {
  components: {
    step
  },
  data () {
    return {
      loading: false,
      manuallyInfo: null,
      manuallyData: null,
      createVisible: false,
      // form: {
      //   pointOrder: null
      // },
      // rules: {
      //   pointOrder: [
      //     { required: true, message: '请输入序号', trigger: 'blur' }
      //   ]
      // }
    }
  },
  created () {
    this.initManuallyData()
  },
  methods: {
    // 初始化排序数据
    initManuallyData () {
      this.loading = true
      let _manuallyInfo = null
      this.manuallyInfo = _manuallyInfo = JSON.parse(sessionStorage.getItem('manuallyStep2'))
      let _manuallyData = []
      let roomNames = _manuallyInfo.roomNames.split(',')
      let staffInvigilate = _manuallyInfo.staffInvigilate.split('|')
      _manuallyData = _manuallyInfo.data.map((item, idx) => {
        let _item = item
        _item.room = roomNames && roomNames[idx] ? roomNames[idx] : null
        _item.staff = staffInvigilate && staffInvigilate[idx] ? staffInvigilate[idx] : null
        return _item
      })
      this.manuallyData = _manuallyData
      console.log(this.manuallyData)
      this.loading = false
    },
    objectSpanMethod () {

    },
    // 保存人工编排
    saveManuallyComplete () {
      let that = this
      let _data = JSON.parse(sessionStorage.getItem('manuallyStep2Data'))
      that.$http.manuallyComplete(_data).then(res => {
        if (res.code === 20000) {
          that.$router.push({ name: 'sequenceSchool' })
        } else {
          that.$message.error(res.msg)
        }
      })
      // that.$refs['ruleForm'].validate((valid) => {
      //   if (valid) {
      //     _data.pointOrder = that.form.pointOrder
      //     that.$http.manuallyComplete(_data).then(res => {
      //       if (res.code === 20000) {
      //         that.$router.push({ name: 'sequenceSchool' })
      //       } else {
      //         that.$message.error(res.msg)
      //       }
      //     })
      //   }
      // })
    },
    // 关闭添加or编辑考生弹框
    resetForm () {
      this.$refs['ruleForm'].resetFields()
      this.createVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.tip
  width 100%
  min-height 500px
  position relative
  p
    position absolute
    width 100%
    top 30%
    text-align center
    font-size:20px;
    color:rgba(85,85,85,1);
    line-height:44px;
    i
      margin-right 20px
      color #60C424
      font-size 30px
      line-height 30px
      font-weight:bold;
.fuzhu
  top 8px
  margin-bottom 20px
.zhu
  margin-top 10px
.btn
  margin-top 30px
  a
    display inline-block
    width 70px
    height 38px
    text-align center
    line-height 38px
    border-radius 5px
    color #fff
    text-decoration none
    margin-right 14px
    &.save
      background color
      width 112px
    &.cancel
      color color
      border 1px solid color
      width 80px
</style>
